<script>
  import { defineComponent } from 'vue'
  import { ElConfigProvider } from 'element-plus'
  import HelloWorld from './components/HelloWorld.vue'
  import TheWelcome from './components/TheWelcome.vue'
  import NavBar from './components/NavBar.vue'

  export default defineComponent({
    components: {
      ElConfigProvider,
      NavBar,
    },

    data() {
      return {
        activeIndex: 0,
        style: {
          width: '1920',
          height: '940',
          transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
        },
      }
    },
    setup() {
      return {
        zIndex: 3000,
        size: 'small',
      }
    },

    mounted() {
      const that = this
      that.setScale()
      /* 窗口改变事件 */
      window.addEventListener('resize', function () {
        console.log('窗口发生变化')
        that.setScale()
      })
    },

    created() {

      //接收query参数role
      //this.role = this.$route.query.role;
      //console.log("this.$store.state.user",this.$store.state.user);
      //设置高亮：默认为首页高亮
      //this.activeIndex = 0
    },
    methods: {

      // 屏幕自适应代码 start
      getScale() {
        const w = window.innerWidth / this.style.width
        const h = window.innerHeight / this.style.height
        return { x: w, y: h }
      },
      setScale() {
        const scale = this.getScale()
        this.style.transform =
          'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
      },
      handleSelect(key, keyPath) {
        //console.log(key, keyPath);
      },
    },
  })

</script>

<template>
  <el-config-provider :zIndex="zIndex" :size="size">

    <el-container id="screen" :style="{width: `${style.width}px`,height: `${style.height}px`,transform: `${style.transform}`}">
      <el-header class="topBar">
         <NavBar/>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="24">
            <router-view></router-view>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>@copyRight blong Eric's workroom</el-footer>
      <header>

        <!--    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>-->
      </header>

      <main>


        <!--<TheWelcome />-->
      </main>
    </el-container>
  </el-config-provider>
</template>

<style scoped>
  el-header {
    line-height: 1.5;
    vertical-align: bottom;
    height: 70px;
  }

  .topBar {
    background-image: url("../assets/images/menu/menu-bg-new.png");
    background-repeat: repeat-x;
    background-size: 100% 100%;
    box-shadow: 0 5px 15px #02234a;
  }


.logo {
  display: block;
  margin: 0 auto 2rem;
}


  #screen {
    z-index: 100;
    transform-origin: 0 0;
    position: fixed;
    left: 50%;
    top: 50%;
    transition: 0.3s;
  }


/*@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}*/
</style>
